<template>
  <div class="container">
    <img src="https://alicdn.joyballet.cn/eyemanager/invite_back5.jpeg" class="back_img">
    <div style="text-align:center;margin-top:114vw">
      <div class="form-container">
        <div class="form-group">
          <label class="form-label" for="phone">联系电话：</label>
          <input
            class="form-input"
            type="text"
            id="phone"
            v-model="form.phone"
            placeholder="请输入手机号"
            required
          />
        </div>
        <div class="form-group">
          <label class="form-label" for="age">孩子年龄：</label>
          <input
            class="form-input"
            type="number"
            id="age"
            v-model="form.age"
            placeholder="请填写孩子年龄"
            required
          />
        </div>
        <div class="form-group">
          <label class="form-label" for="degree">目前度数：</label>
          <input
            class="form-input"
            type="number"
            id="degree"
            v-model="form.degree"
            placeholder="请填写孩子目前度数"
            required
          />
        </div>
      </div>
    </div>
    <div v-if="success_dialog" class="success_dialog">
      <img class="sales_dialog" src="https://alicdn.joyballet.cn/eyemanager/success_dialog2.png">
      <img class="sales_qrcode" :src="qr_img_src">
    </div>
    <div style="text-align:center;width: 100%;">
      <div class="appont_btn" @click="appoint()">免费预约报名</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      form: {
        phone: '',
        age: '',
        degree: '',
        sales_id: 0,
      },
      qr_img_src: 'https://alicdn.joyballet.cn/eyemanager/sales_qrcode.jpeg',
      success_dialog: false,
      isSubmitting: false,
    };
  },
  mounted() {
    const that = this;
    // 获取销售ID
    if (this.$route.query.sales_id) {
      this.form.sales_id = this.$route.query.sales_id;
    }
    const salesId = this.form.sales_id;
    // if (salesId > 400 && salesId <= 500) {
    //   const randomNumber = Math.floor(Math.random() * 1);
    //   if (randomNumber === 0) {
    //     salesId = 150;
    //   } else if (randomNumber === 1) {
    //     salesId = 250;
    //   }
    // }
    if (salesId > 100 && salesId <= 200) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/invite_qrcode_wangjiang.jpeg';
    } else if (salesId > 200 && salesId <= 300) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/invte_qrcode_xulipeng.jpeg';
    }
    if (salesId == 12) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/eyemanager_sales_12.jpeg';
    }
    if (salesId == 17) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/shbos_sales_17.jpeg';
    }
    if (salesId == 19) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/sales/invite_sales_19.jpeg';
    }
    if (salesId == 27) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/sales/shbos_27_sales.jpeg';
    }
    if (salesId == 31) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/sales/sales_invite_31.png';
    }
    if (salesId == 33) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/sales/shbos_sales_33.jpeg';
    }
    if (salesId == 225) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/sales/invite_sales_225.jpeg';
    }
    if (salesId == 42) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/sales/invite_sales_42_43.jpeg';
    }
    if (salesId == 43) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/sales/invite_sales_42_43.jpeg';
    }
    if (salesId == 241) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/sales/invite_sales_42_43.jpeg';
    }
    if (salesId >= 401 && salesId <= 499) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/sales/invite_sales_42_43.jpeg';
    }
    if (salesId >= 261 && salesId <= 280) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/sales/shbos_sales_261_280.jpeg';
    }
    if (salesId >= 600 && salesId <= 699) {
      this.qr_img_src = 'https://alicdn.joyballet.cn/eyemanager/sales/600-699sales.jpeg';
    }
    if (salesId > 1000) {
      this.fetchSalesQrCode();
    }
    that.$server.post('/api/invite/scan', {sales_id: that.form.sales_id}).then((res) => {
      console.log(res);
    });
    console.log('init', this.form.sales_id, salesId);
  },
  methods: {
    async fetchSalesQrCode() { // ← 这里必须有 async
      const that = this;
      if (that.form.sales_id > 1000) {
        try {
          const response = await axios.get(
            `https://shbos.com/api/admin/student/student/getSalesQrCode?studentId=${that.form.sales_id}`
          );
          console.log('response data', response, that.form.sales_id, response.data.data);
          if (response.data.code == 1000) {
            that.qr_img_src = response.data.data;
          }
        } catch (error) {
          console.error(error);
        }
      }
    },
    appoint() {
      const that = this;
      // that.$server.post('/api/manage/login', {
      //   username: 'admin',
      //   password: 'szmaml1234'
      // }).then((res) => {
      //   console.log('appoint', res);
      // });
      that.$server.post('/api/invite/regist', that.form).then((res) => {
        console.log('appoint', res);
        if (res.code != 200) {
          alert(res.msg);
        } else {
          that.success_dialog = true;
        }
      }).then((res) => {
        console.log('appoint error', res);
      });
    }
  },
};
</script>

<style>
.sales_dialog {
  width: 100%;
  margin-top: 68%;
}
.sales_qrcode {
  position: relative;
  width: 33%;
  top: -59vw;
  left: 1vw;
}
.form_input {
  border: 1px solid #f3ecec;
}
.success_dialog {
  position: absolute;
  width: 100%;
  top: 0;
  text-align: center;
  height: 100%;
  background: #ffffffa8;
}
body {
  height: auto;
}
.appont_btn {
  width: 80vw;
  background-color: #0b8fe1;
  color: #fff;
  margin: auto;
  padding: 3vw;
  font-size: 5vw;
  border-radius: 50vw;
}
.form-label {
  width: 30vw;
  font-size: 15px;
  line-height: 34px;
  font-weight: bold;
}
.form-container {
  margin: auto;
  width: 95vw;
  background-color: #fff;
  border-radius: 5vw;
}
.container {
  width: 100%;
}
.back_img {
  top: 0;
  position: absolute;
  width: 100%;
  z-index: -999;
}
.form_img {
  top: 40vw;
  position: absolute;
  width: 80vw;
  z-index: -998;
}
.btn_img {
  top: 80vw;
  position: absolute;
  width: 80vw;
  z-index: -998;
}
.header {
  margin-bottom: 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.subtitle {
  font-size: 16px;
  color: #666;
  margin-top: 5px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-top: 10px;
}

.slogan {
  font-size: 18px;
  color: #007bff;
  margin-top: 5px;
}


.form-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.rating {
  font-size: 14px;
  color: #ff9800;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
  text-align: left;
  display: flex;
  width: 100%;
  padding: 4vw;
}

label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.3s ease;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background-color: #0056b3;
}

.note {
  font-size: 12px;
  color: #666;
  margin-top: 15px;
}
</style>
